<template>
  <div>
    <div>
      <a-button
        type="primary"
        size="small"
        @click="refreshBtnClick"
      >
        刷新
      </a-button>
      <a-button type="danger" size="small" @click="removeAll">
        删除所有
      </a-button>
    </div>
    <br>
    <a-tree :tree-data="files" @select="selectChange" @rightClick="removeFile" />
    <w-viewer ref="WViewer" />
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { Admin } from '@/config/api'
import WViewer, { ViewerComType } from '@/components/global/viewer'

@Component({
  name: 'AdminServerEcs',
  layout: 'admin',
  components: {
    WViewer
  },
  head () {
    return {
      title: '阿里云服务器'
    }
  }
})
export default class AdminServerEcs extends Vue {
  files = []
  selFile:any = null
  mounted () {
    this.refreshBtnClick()
  }

  /**
   * 刷新按钮点击
   */
  refreshBtnClick () {
    this.$wAxios
      .$get(Admin.ecs.allFiles)
      .then((data) => {
        this.files = data
      })
      .catch(() => {})
  }

  /**
   * 点击
   */
  selectChange (_: any, { node }: any) {
    // const [item] = items
    const { filePath, isDir } = node.dataRef
    if (isDir) {
      this.$message.success(`文件夹【${filePath}】`)
      return
    }
    const url = `/${process.env.API_HEADER}/public/up-image/${filePath}`;
    (this.$refs.WViewer as ViewerComType).show([url])
  }

  /**
   * 删除文件
   */
  removeFile ({ node }: any) {
    const { filePath } = node.dataRef
    this.$wRemovePop(() => {
      return this.$wAxios.$delete(Admin.ecs.deleteFile, '', {
        path: filePath
      })
    }, node.dataRef.filePath).then(() => {
      this.refreshBtnClick()
    })
  }

  /**
   * 删除所有文件
   */
  removeAll () {
    this.$wRemovePop(() => {
      return this.$wAxios.$delete(Admin.ecs.deleteAll)
    }, '所有')
      .then(() => {
        this.refreshBtnClick()
      })
      .catch(() => {})
  }
}
</script>

<style scoped></style>
